﻿<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>登录系统</title>
	<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="/resource/apple.ico" />
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link href="/lobsteruiframe/layuiadmin/layui/css/layui.css" rel="stylesheet" />
	<link href="/lobsteruiframe/layuiadmin/style/admin.css" rel="stylesheet" />
	<link href="/lobsteruiframe/layuiadmin/style/login.css" rel="stylesheet" />
	<script src="/lobsteruiframe/layuiadmin/layui/layui.js"></script>
	<script src="/jslib/jquery-3.4.1.min.js"></script>
	<script src="/jslib/lobster.js"></script>

	<style>
		.bg {
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,.5);
			position: absolute;
			top: 0;
			left: 0;
			z-index: 99;
		}
		/*弹框*/
		.showBox {
			width: 450px;
			height: 430px;
			position: absolute;
			left: 50%;
			top: 50%;
			margin-top: -200px;
			margin-left: -250px;
			font-size: 16px;
			color: #fff;
			line-height: 50px;
			text-align: center;
			z-index: 999;
			vertical-align: middle;
			display: table;
		}

		.boxCon {
			width: 450px;
			display: table-cell;
			vertical-align: middle;
			text-align: center;
		}

		.content1 {
			background: #fff;
			padding-bottom: 20px;
			overflow-y: auto;
			height: 100%;
		}

		p.boxTitle {
			font-size: 18px;
			color: #000;
			position: relative;
		}

		.box {
			color: #fff;
			width: 350px;
			height: 50px;
			background: #009deb;
			vertical-align: middle;
			margin: 8px auto;
			display: inline-block;
		}

			.box:hover {
				color: #fff;
				cursor: pointer;
				background: rgba(0,157,235,.7);
			}

		.wxcont {
			height: 90%
		}

		.layui-form-item {
			margin-bottom: 20px;
		}

		.layui-tab-title {
			/*text-align: center;*/
			border-bottom-width: 0px;
		}

			.layui-tab-title li {
				font-size: 16px;
			}

		.layui-tab-brief .layui-tab-title .layui-this {
			color: black;
			font-weight: 700;
		}

			.layui-tab-brief .layui-tab-title .layui-this:after {
				border-bottom: 3px solid #5FB878;
				left: 24%;
				right: 24%;
				width: unset;
			}

		.layadmin-user-login-main {
			background-color: white;
			width: 485px;
			padding: 0 40px;
			box-shadow: 2px 3.464px 10px 0px rgb(6 0 1 / 20%);
		}

		.layadmin-user-login-box {
			padding-left: 0;
			padding-right: 0;
			padding-bottom: 0;
		}

		.layadmin-user-login {
			padding: 150px 0;
		}

		.site-title {
			margin: 0 0 20px;
		}

			.site-title fieldset {
				border: none;
				padding: 0;
				border-top: 1px solid #eee;
			}

				.site-title fieldset legend {
					margin-left: 35%;
					padding: 0 10px;
					font-size: 13px;
					font-weight: 300;
				}

		.layui-tab-item {
			position: relative;
		}

		.qrcode {
			display: flex;
			flex-direction: column;
			align-items: center;
			z-index: 1;
			position: relative
		}

		.scan {
			z-index: 2;
			position: absolute;
			background-color: white;
			opacity: 0.99;
			display: flex;
			flex-direction: column;
			top: 10px;
			width: 100%;
			height: 100%;
			align-items: center;
		}

		.invalid {
			z-index: 2;
			position: absolute;
			display: flex;
			flex-direction: column;
			top: 0;
			width: 100%;
			height: 100%;
			align-items: center;
		}

		.refresh {
			display: flex;
			flex-direction: column;
			width: 180px;
			height: 180px;
			align-items: center;
			justify-content: center;
			background: rgba(0,0,0,0.6);
		}

		.loginway-img {
			display: flex;
			justify-content: center;
			align-items: center;
		}

			.loginway-img img {
				width: 30px;
				height: 30px;
				padding: 10px;
			}
	</style>

</head>

<body>
	<div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;background:url('/resource/bg2.jpg')">
		<div class="layadmin-user-login-main">
			<div class="layadmin-user-login-box layadmin-user-login-header">
				<div style="font-size:24px;padding-bottom:20px">
					登录平台
				</div>
				<p> </p>
			</div>
			<div class="layui-tab layui-tab-brief" lay-filter="loginType">
				<ul class="layui-tab-title">
					<li class="layui-this">账号密码登录</li>
					<li>手机验证登录</li>
				</ul>
				<div class="layui-tab-content">
					<div class="layui-tab-item layui-show">
						<div class="layadmin-user-login-box layadmin-user-login-body layui-form">
							
							<div class="layui-form-item">
								<label class="layadmin-user-login-icon layui-icon layui-icon-username" for="LAY-user-login-username"></label>
								<input type="text" name="username" id="LAY-user-login-username" lay-verify="required" placeholder="用户名" class="layui-input">
							</div>
							<div class="layui-form-item">
								<label class="layadmin-user-login-icon layui-icon layui-icon-password" for="LAY-user-login-password"></label>
								<input type="password" name="password" id="LAY-user-login-password" lay-verify="required" placeholder="密码" class="layui-input">
							</div>
							<div class="layui-form-item">
								<div class="layui-row">
									<div class="layui-col-xs7">
										<label class="layadmin-user-login-icon layui-icon layui-icon-vercode" for="LAY-user-login-vercode"></label>
										<input type="text" name="vercode" id="LAY-user-login-vercode" lay-verify="required" placeholder="图形验证码" class="layui-input">
									</div>
									<div class="layui-col-xs5">
										<div style="margin-left: 10px;">
											<img id="vercode" class="layadmin-user-login-codeimg" src="" />
										</div>
									</div>
								</div>
							</div>

							
								<button id="login" class="layui-btn layui-btn-fluid" style="margin-bottom:10px" lay-submit lay-filter="LAY-user-login-submit">立即登录</button>
								
							<div class="layui-form-item" style="margin-bottom: 20px;">
								<a class="layadmin-user-jump-change layadmin-link" href="/admin/login/RegUser.html">去注册</a><a class="layadmin-user-jump-change" style="float:left;color:#7f7f7f" href="/admin/login/ForgotPass.html">忘记密码？</a>
							</div>
						</div>
					</div>
					<div class="layui-tab-item">
						<div class="layadmin-user-login-box layadmin-user-login-body layui-form">
							
							<div class="layui-form-item">
								<label class="layadmin-user-login-icon layui-icon layui-icon-username" for="LAY-user-login-phone"></label>
								<input type="text" name="phone" id="LAY-user-login-phone" lay-verify="required" placeholder="请输入手机号" class="layui-input">
							</div>
							<div class="layui-form-item">
								<div class="layui-row">
									<div class="layui-col-xs8">
										<label class="layadmin-user-login-icon layui-icon layui-icon-vercode" for="LAY-user-login-smscode"></label>
										<input type="text" name="smsCode" id="LAY-user-login-smscode" lay-verify="required" placeholder="请输入短信验证码" class="layui-input">
									</div>
									<div class="layui-col-xs4">
										<div style="margin-left: 10px;">
											<button class="layui-btn" style="float:right" id="btnSendCode">获取验证码</button>
										</div>
									</div>
								</div>
							</div>

							
								<button id="loginphone" class="layui-btn layui-btn-fluid" style="margin-bottom:10px" lay-submit lay-filter="LAY-user-login-submitphone">立即登录</button>
								
							<div class="layui-form-item" style="margin-bottom: 20px;">
								<a class="layadmin-user-jump-change layadmin-link" href="/admin/login/RegUser.html">去注册</a>
							</div>
						</div>
					</div>
				</div>
				
			</div>
			

			<div class="bg" style="display:none;">
				<div class="showBox">
				</div>
			</div>
		</div>
		<div class="layui-trans layadmin-user-login-footer">
			<p>© All Rights Reserved</p>
		</div>
	</div>
</body>

</html>

<script type="text/javascript">
	lobsterlayui.main(['index', 'layer', 'form', 'element'],{
		data: {
			$layui: null,
            LoginKey: '',
            LoginType: 0,//0普通账号登录 1手机号+验证码登录 2二维码登录
            Timer: null,//轮询定时器
			uuid: '',
			smsKey: '',//短信Key
            timeCount:0//短信计数
		},
		pageload: function () {
			var form = this.data.$layui.form;
            form.render("select");
            this.getvercode();//显示验证码
			this.initevent();
			
		},
		//获取图形验证码
        getvercode: function () {
            lobsterlayui.GET("/admin/v1/login/GetValidateCode").then(data => {
                $("#vercode").attr("src", 'data:image/png;base64,' + data.image);
            });
		},
        //发送短信验证码
        getsmscode: function () {
			var self = this;
			var layer = this.data.$layui.layer;

            lobsterlayui.GET("/admin/v1/login/WebLoginSendSmsVerCode", { phoneNumber: $("#LAY-user-login-phone").val()}).then(data => {
				layer.msg('短信验证码发送成功');
				self.data.timeCount = 60;
				self.data.smsKey = data.smsKey;
                self.settime();
			});
        },
		//初始化事件
		initevent: function () {
			var self = this;
			var layer = this.data.$layui.layer;
			var form = this.data.$layui.form;
			var element = this.data.$layui.element;

            //更换图形验证码
            $('body').on('click', '#vercode', function () {
                //获取图形验证码
                self.getvercode();
            });
            //提交普通账号登录事件
            form.on('submit(LAY-user-login-submit)', function (obj) {
                var load = layer.msg('正在处理，请稍候', { icon: 16, time: 0, shade: [0.3, '#393D49'] });
                //登录应用系统
                lobsterlayui.POST("/admin/v1/login/WebLogin", obj.field).then(data => {
					layer.close(load);

					self.loginWorker(data);

				}).catch(res => {
					layer.close(load);
                    layer.msg(res.msg);
                    //登录失败，重新获取图形验证码
                    self.getvercode();
				});

            });
            //监听手机号登录事件
            form.on('submit(LAY-user-login-submitphone)', function (obj) {
                var ret = self.chkphone($("#LAY-user-login-phone").val());
                if (!ret.result) {
                    layer.msg(ret.msg);
                    return;
				}
				if (!self.data.smsKey) {
                    layer.msg('请先获取短信验证码');
                    return;
                }
				var load = layer.msg('正在处理，请稍候', { icon: 16, time: 0, shade: [0.3, '#393D49'] });
				var data = Object.assign({}, obj.field, { "smsKey": self.data.smsKey });
                
                //登录应用系统
                lobsterlayui.POST("/admin/v1/login/WebLoginByPhone", data).then(data => {
					layer.close(load);
					self.loginWorker(data);

                }).catch(res => {
                    layer.close(load);
                    layer.msg(res.msg);
                });

            });
            //回车登录
            $(document).keyup(function (event) {
                if (event.keyCode == 13) {
                    if (self.data.LoginType == 0) {
                        $("#login").trigger("click");
                    } else if (self.data.LoginType == 1) {
                        $("#loginphone").trigger("click");
                    }

                }
			});

            $(".showBox").on('click', ".layui-icon-close", function () {
                $(".bg").hide();
            })

            //选择登录机构监听
			$(".showBox").on('click', '.box', function () {
				lobsterlayui.GET("/admin/v1/login/WebLoginFinish", { workId: $(this).data("workid"), LoginKey: self.data.LoginKey }).then(data => {
					self.loginSuccess(data);
				}).then(res => {
                    layer.msg(res.msg);
                    //隐藏
                    $(".bg").hide();
				});
            })

            //发送短信验证码按钮监听
            $("#btnSendCode").on('click', function () {
                var ret = self.chkphone($("#LAY-user-login-phone").val());
                if (ret.result) {
                    self.getsmscode();
                } else {
                    layer.msg(ret.msg);
                }
            });
		},
        //登录后操作选择机构
		loginWorker: function (data) {
			var self = this;
			var layer = this.data.$layui.layer;

			var result = data.result;
			if (result.state == 1) {//登录成功，只加入一家机构
				lobsterlayui.GET("/admin/v1/login/WebLoginFinish", { workId: result.WorkId, LoginKey: result.LoginKey }).then(data => {
					self.loginSuccess(data);
                });
            }
            else if (result.state == -1) {//有待审核机构
                layer.msg('您申请的机构待审核，请联系管理员', {
                    offset: '15px'
                    , icon: 1
                    , time: 2000
                });
            }
            else if (result.state == 0) { //没有一家机构
                layer.msg('没有入驻医疗机构，请先申请加入一个医疗机构', {
                    offset: '15px'
                    , icon: 1
                    , time: 2000
                }, function () {
                });
            }
            else if (result.state > 1) {//如果扫码成功，微信绑定了多个账号，弹出选择机构的列表，选定机构后跳转到主页（同一机构一个微信号只能绑定一个用户）
                var WorkList = result.WorkList;
                var LoginKey = this.data.LoginKey = result.LoginKey;
                var showbox = $(".showBox");
                var html = "<div class=\"boxCon\">";
                html += "<div class=\"content1\">";
                html += " <p class=\"boxTitle\">请选择登录的医疗机构";
                html += "<i class=\"layui-icon layui-icon-close\" style=\"font-size: 30px;color: #1E9FFF;position:absolute;right: 20px;top: 0;cursor: pointer;\"></i>";
                html += "</p>";
                $(WorkList).each(function (i, n) {
                    html += "<div class=\"box\" data-userid=\"" + n.UserID + "\" data-workid=\"" + n.WorkId + "\" data-tokenkey=\"" + LoginKey + "\">" + n.WorkName + "</div>";
                })
                html += " </div>";
                html += " </div>";
                showbox.html(html);
                $(".bg").show();
            }
		},
        //登录成功处理
        loginSuccess: function (data) {
			console.log(data);
			var layer = this.data.$layui.layer;
			lobsterlayui.SucceedLogin(data);
            //登入成功的提示与跳转
            layer.msg('登录成功', {
                offset: '15px'
                , icon: 1
                , time: 1000
			});
			if (data.logindata.IsAdmin == 0) {
                location.href = '/admin/home/Index.html';//普通用户直接进入后台首页
            } else {
                location.href = '/admin/home/Index.html';
            }

		},
        //校验手机号
        chkphone: function (value) {
            var msg = '';
            var result = false;
            if (value == "" || value == null) {
                msg = '手机号码必填'
                return { result: result, msg: msg };
            }
            var len = value.length
            if (len > 0) {
                if (len == 7)
                    re = /^([0-9]|[-])+$/g;
                else if (len == 11)
                    re = /^1[34578]\d{9}$/;
                else {
                    msg = '输入的手机号码位数不对';
                    return { result: result, msg: msg };
                }
                if (!re.test(value)) {
                    msg = '手机号格式不正确';
                    return { result: result, msg: msg };
                }
                return { result: true, msg: msg };
            }
		},
        //发送验证码倒计时
		settime: function () {
			var self = this;
            //把按钮设置为不可以点击
            $('#btnSendCode').attr("disabled", true);
            var interval = setInterval(function () {//每秒读取一次缓存
				//从缓存中读取剩余倒计时
				var total = self.data.timeCount;
                //把剩余总倒计时减掉1
                total--;
                //在发送按钮显示剩余倒计时
                $('#btnSendCode').html('请等待' + total + '秒');
                if (total == 0) {//剩余倒计时为零，则显示 重新发送，可点击
                    //清除定时器
                    clearInterval(interval);
                    //显示重新发送
                    $('#btnSendCode').html('重新发送');
                    //把发送按钮设置为可点击
                    $('#btnSendCode').attr("disabled", false);
                } else {//剩余倒计时不为零
					//重新写入总倒计时
					self.data.timeCount = total;
                }
            }, 1000);
        },
	}, false);


</script>